<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    </head>
    <body>

        <h3>指令: v-bind</h3>

        <p>使用 v-bind 指令可以为元素绑定属性值</p>
        <p>指令 v-bind 使用形式: `v-bind:attributeName="attributeValue"`</p>
        <p>可以将 `v-bind:attributeName="attributeValue"` 缩写为 `:attributeName="attributeValue"`</p>

        <div class="root">
            <input type="radio" v-model="type" value="text">文本框
            <input type="radio" v-model="type" value="password">密码框
            <hr>
            <input v-bind:type="type" v-bind:value="value">
            <hr>
            <input :type="type" :value="value">
        </div>

        <script src="vue.global.js"></script>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        type: 'text' ,
                        value: 'kaifamiao'
                    }
                }
            });
            const instance = app.mount('.root');
            console.log(instance);
        </script>

    </body>
</html>